import { View, Text, FlatList, Image, useWindowDimensions, Button } from 'react-native'
import React, { useEffect, useRef } from 'react'
import {base} from '../service'

export default function ZhSwiper({list}) {
  //普通变量 —— 记录当前要显示的轮播广告下标，注意：和“状态变量”的区别：无需直接渲染在视图中
  let idx = 0
  //创建一个组件对象的引用
  let swiperRef = useRef()
  //获取屏幕宽度，即轮播图片的宽度
  let {width}  = useWindowDimensions()
  //计算轮播图片的高度(宽高比为600:180)
  let height = width * 180 / 600     
  
  //关注父组件传来的数据list发生改变时，如果发现list中有数据，则启动轮播定时器
  //useEffect()创建生命周期方法优于过往的机制优秀——集中管理特定数据相关的所有操作
  useEffect(()=>{         
    //console.log('list变量发生改变了：',list) //此处刚开始是[]，后来是[obj, obj, obj, ojb]
    //如果list中有数据，且数据量超过2时，开启轮播定时器
    let timer = null
    if(list.length>1){
      timer = setInterval(next, 2000)
    }
    return ()=>{
      //依赖的数据即将改变时 + 组件即将卸载时 调用 —— 可以获得即将逝去的数据
      clearInterval(timer)    //销毁旧数据时创建的定时器
      timer = null
    }
  }, [list])

  //渲染轮播广告中的一个列表项
  let renderAd = ({index, item})=>{
    //加载远程数据服务器上图片
    return <Image style={{width, height}} source={{uri: base+item.pic}}/>
  }
  //轮播到下一张图片，如果已到最后一张，则返回第一张          
  let  next = ()=>{
    idx++
    idx = idx>=list.length ? 0 : idx
    // console.log('即将显示的广告下标：', idx)
    //找到页面中的FlatList元素，调用其“滚动到指定下标处”方法
    swiperRef.current.scrollToIndex({index: idx})
  }
  return (
    //轮播广告下面的兄弟（ZhTabs）组件高度很大，可能会挤小兄弟元素；此处声明轮播广告尺寸不参与收缩
    <View style={{flexShrink:0}}>
      {/* 临时添加效果：点击按钮时轮播到下一张图片 */}
      {/* <Button title="下一张" onPress={next}/> */}
      {/* RN中可以使用FlatList模拟实现“轮播广告”组件效果 */}
      {/* horizontal：是否水平排布列表项 */}
      {/* pagingEnabled：是否启用分页显示（要么显示列表项N，要么显示列表项N+1，不允许停留在二者之间 */}
      <FlatList
        ref={swiperRef}
        data={list}
        renderItem={renderAd}
        horizontal={true}
        pagingEnabled={true}
      />
    </View>
  )
}